let product=(function(){
	let data;
	let boxtop=document.querySelector(".boxtop");
	let boxbtm=document.querySelector(".boxbtm");
	//1.获取数据
	const getData=function getData(){
		let xhr=new XMLHttpRequest;
		xhr.open("GET","data.json",false);
		xhr.onreadystatechange=function(){
			if(xhr.readyState===4&&xhr.status===200){
				//console.log(xhr.response);
				data=JSON.parse(xhr.response);
			}
		}
		xhr.send(null);
	}
	//循环渲染数据
	const render=function render(){
		//上半部分数据
		let str="";
		let allcount=0,allprice=0,maxprice=[0];
		data.forEach(item=>{
			let {id,count,price}=item;
			str+=`<div class="row" data-id="${id}">
					<img src="img/add.png" alt="" class="add">
					<span>${count}</span>
					<img src="img/sub.png" alt="" class="minus">
					<p>单价：${price}元 小计：${(count*price).toFixed(2)}元</p>
				</div>`
		    allcount+=count;
			allprice+=count*price;
			if(count>0){
				maxprice.push(price);
			}
		})
		boxtop.innerHTML=str;

		let stra=`<p>商品合计：<span>${allcount}</span> 件</p>
				<p>共花费了：<span>${allprice}</span> 元</p>
				<p>其中最贵的商品单价是：<span>${Math.max(...maxprice)}</span> 元</p>`
		boxbtm.innerHTML=stra;
	}
	//功能部分
	const handle=function handle(){
		//应该点击是按钮，但是用事件委托给 boxtop
		boxtop.onclick=function(e){//event事件对象
			// console.log(e.target);//e.target 目标对象---触发事件的元素
			// console.log(e.target.tagName);//触发事件的元素的标签名--大写
			if(e.target.tagName=="IMG"){
				//找到点击加减元素，那行的id
				let aid=e.target.parentNode.getAttribute("data-id");
				//通过id 找到 data里面的元素  
				//find 数组的方法，查找符合条件(return item.id==aid)的元素
				let aitem=data.find(item=>{
					return item.id==aid
				})
				if(!aitem){//如果未找到那项
					return;//中断
				}
				if(e.target.className=="add"){
					aitem.count++;
				}else{
					aitem.count--;
					if(aitem.count<=0){//数量下于等于0
						aitem.count=0//数量等于0
					}
				}
				render();//页面重新渲染
			}
		}
	}
	
	return {
		init(){//初始化方法
			getData();
			render();
			handle();
		}
	}
})()
product.init()